<template>
  <div class="app-container" v-loading="loading">
    <div style="font-size: 20px; font-weight: bold">已导入附件列表</div>
    <div class="app-top">
      <div>
        <input
          @change="uploadTemplate"
          v-if="isShowFile"
          type="file"
          ref="file"
          style="opacity: 0; width: 0; height: 0"
        />
        <el-button
          size="small"
          type="primary"
          @click="downloadTemplate"
          style="margin-left: 10px"
          >下载模板<i class="el-icon-download el-icon--right"></i
        ></el-button>
        <el-button
          size="small"
          type="primary"
          @click="uploadFile"
          style="margin-left: 10px"
          >上传<i class="el-icon-upload el-icon--right"></i
        ></el-button>
      </div>
    </div>
    <el-table
      v-loading="isLoading"
      :data="list"
      element-loading-text="Loading"
      :header-cell-style="{
        background: 'rgba(61,157,255,0.05)',
        color: '#333333',
      }"
      fit
      :row-class-name="xxxTableRowClassName"
      highlight-current-row
    >
      <template slot="empty">
        <span>暂无数据</span>
      </template>
      <el-table-column
        align="center"
        prop="fileName"
        label="文件名称"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="total"
        label="导入数量"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="successTotal"
        label="成功数量"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="createTime"
        label="导入时间"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="createUserName"
        class-name="status-col"
        label="导入人姓名"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="createSchoolName"
        label="所属学校"
      ></el-table-column>
    </el-table>
    <pagination-page @size="changeSize" @page="changePage" :total="total" />
  </div>
</template>

<script>
import {
  exportTemplate,
  getStuHealthLogList,
  importHealthTable,
} from "@/api/stuHealthTable";
import { downLoadTempalteApi } from "@/api/school/student";
export default {
  data() {
    return {
      list: null,
      isLoading: false,
      loading: false,
      model: {
        pageSize: 10,
        pageNum: 1,
        userId: null,
      },
      total: -1,
      isShowFile: false,
    };
  },
  created() {
    this.getStuHealthLogList();
  },
  methods: {
    selectChange() {
      this.model.pageNum = 1;
      this.getStuHealthLogList();
    },
    getStuHealthLogList() {
      this.loading = true;
      this.model.userId = this.$store.state.user.USER_INFO.id;
      getStuHealthLogList(this.model).then((response) => {
        this.loading = false;
        if (response.code === 200) {
          this.list = response.result;
          this.total = response.total;
        }
      });
    },
    downloadTemplate() {
      exportTemplate().then((response) => {
        if (response.code === 200) {
          // const url = window.URL.createObjectURL(new Blob([res.data],{ type: 'application/octet-stream;charset=utf-8'}));
          const link = document.createElement("a");
          link.style.display = "none";
          link.href = this.$store.state.user.BASE_URL + response.result;
          link.download = "体质健康表模板.xls";
          document.body.appendChild(link);
          link.click();
          this.$message.success(response.message);
        } else if (response.code === 401) {
          this.$router.replace("/");
          this.$message.error("您的身份信息已过期，请重新登录");
          sessionStorage.removeItem("userInfo");
          sessionStorage.removeItem("token");
          this.$store.commit("user/SET_TOKEN", "");
        } else {
          this.$message.error(response.message);
        }
      });
    },
    changeSize(size) {
      this.model.pageSize = size;
      this.getStuHealthLogList();
    },
    closeSuccess() {
      this.model.pageNum = 1;
      this.model.pageSize = 10;
      this.getStuHealthLogList();
    },
    changePage(page) {
      this.model.pageNum = page;
      this.getStuHealthLogList();
    },
    uploadFile(e) {
      this.isShowFile = true;
      this.$nextTick(() => {
        this.$refs.file.click();
      });
    },
    uploadTemplate() {
      this.loading = true;
      let upload_file = this.$refs.file.files[0];
      const upload_file_name = upload_file.name.substring(
        upload_file.name.lastIndexOf(".") + 1
      );
      if (upload_file_name != "xls") {
        this.$message.error("只可以上传xls文件");
        this.loading = false;
        return;
      }
      let formData = new FormData();
      formData.append("file", upload_file);
      formData.append("userId", this.$store.state.user.USER_INFO.id);
      importHealthTable(formData)
        .then((response) => {
          this.loading = false;
          if (response.code === 200) {
            this.$message.success("导入成功");
            this.getStuHealthLogList();
          } else if (response.code === 401) {
            this.$router.replace("/");
            this.$message.error("您的身份信息已过期，请重新登录");
            sessionStorage.removeItem("userInfo");
            sessionStorage.removeItem("token");
            this.$store.commit("user/SET_TOKEN", "");
          } else {
            this.$message.error(response.message);
          }
        })
        .catch((error) => {
          this.$message.error("server error !!!!");
          this.loading = false;
        });
      this.isShowFile = false;
    },
    xxxTableRowClassName({ row, rowIndex }) {
      this.dialogFormVisible = true;
      if (rowIndex % 2 !== 0) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
  },
};
</script>
<style scoped lang="scss">
.app-top {
  float: right;
  margin-top: -20px;
  margin-bottom: 30px;
}
::v-deep .el-table__row.statistics-warning-row {
  background: rgba(61, 157, 255, 0.05);
}
</style>
